<template>
	<view class="body">
		<!-- 开头部分 -->
		<uni-nav-bar dark background-color="#2477f4" title="订单详情" :border="false" left-icon="left"
			@clickLeft="back"></uni-nav-bar>
		<view class="bc">
			<view class="message">
				<text>支付成功，请您前往指定门店消费</text>
			</view>
			<view class="shop">
				<view class="left">
					<image src="/static/商家(白).png" mode=""></image>
				</view>
				<view class="right">
					<view class="shop-name">
						<text>伟业汽车美容店（人民路店）</text>
					</view>
					<view class="shop-address">
						<text>山阳区人民中路33号</text>
					</view>
					<image src="/static/plane(白).png" mode="" class="plane"></image>
				</view>
			</view>
		</view>
		<!-- 订单详情部分 -->
		<view class="orderDetails">
			<view class="title">
				<text>订单详情</text>
			</view>
			<view class="service">
				<view>
					<text>车辆精洗</text>
					<view class="m1">￥39.90</view>
				</view>
				<view>
					<text>车辆附加费用</text>
					<view class="m2">￥0</view>
				</view>
			</view>
			<view class="price">
				<view >
					<text>原价</text>
					<view class="m3">￥59.90</view>
				</view>
				<view >
					<text>店家优惠</text>
					<view class="m4">-￥20</view>
				</view>
			</view>
			<view class="oupons">
				<text>优惠券</text>
				<view class="m5">-￥10</view>
			</view>
			<view class="pay">
				<text>支付金额</text>
				<view class="m6">￥29.90</view>
			</view>
		</view>
		<!-- 订单信息部分 -->
		<view class="orderInfo">
			<view class="title">
				<text>订单信息</text>
			</view>
			<view class="infoItem">
				<view>
					<text>订单号：</text>
					<view class="info1">121212112487878</view>
				</view>
				<view>
					<text>下单时间：</text>
					<view class="info1">2020.01.08 17:40</view>
				</view>
				<view>
					<text>车辆：</text>
					<view class="info1">奔驰FWE4/豫A98FHJ</view>
				</view>
			</view>
		</view>
		<view class="aaa">
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			back(){
				uni.navigateBack();
			},
		}
	}
</script>

<style>
	.body{
		width: 750rpx;
	}
	/* 开头部分样式开始 */
	.bc {
		width: 750rpx;
		height: 300rpx;
		position: relative;
		border-top: 2rpx solid #2477f4;
		background-color: #2477f4;
		
	}

	image {
		width: 30rpx;
		height: 30rpx;
	}

	.message {

		color: white;
		height: 80rpx;
		padding: 0 40rpx;
		line-height: 80rpx;
		margin-bottom: 20rpx;
	}

	.shop {
		padding: 0 40rpx;
		color: white;
		display: flex;
		position: relative;
		margin-bottom: 20rpx;
	}
	
	.shop .left{
		width: 40rpx;
		padding-top: 6rpx;
		margin-right: 10rpx;
	}
	
	.right .shop-name {
		font-size: 34rpx;
		margin-bottom: 10rpx;
	}
	
	.plane{
		position: absolute;
		right: 40rpx;
		top:60rpx
	}
	
	/* 开头部分样式结束 */
	
	/* 订单详情部分开始 */
	.orderDetails{
		margin: 0 20rpx;
		padding: 20rpx;
		width: 670rpx;
		top: 320rpx;
		border-radius: 20rpx;
		position: absolute;
		background-color: white;	
	}
	
	.orderDetails .title{
		height: 88rpx;
		font-size: 34rpx;
		font-weight: bold;
		line-height: 88rpx;
		border-bottom: 4px solid #f2f2f2;
	}
		
	.service{
		padding: 20rpx 0;
		border-bottom: 2px solid #f2f2f2;
	}
	.price{
		padding: 20rpx 0;
		border-bottom: 2px solid #f2f2f2;
	}
	
	.orderDetails .service>view{
		font-size: 30rpx;
		height: 68rpx;
		line-height: 68rpx;
		position: relative;
		
	}
	
	.orderDetails .price>view{
		font-size: 30rpx;
		height: 68rpx;
		line-height: 68rpx;
		position: relative;
	}
	
	.oupons{
		font-size: 30rpx;
		height: 68rpx;
		line-height: 68rpx;
		position: relative;
		padding-bottom: 20rpx;
		border-bottom: 4px solid #f2f2f2;
	}
	
	.pay{
		font-size: 30rpx;
		height: 88rpx;
		line-height: 88rpx;
		position: relative;
		/* padding-bottom: 20rpx; */
	}
	
	.service .m1{
		top:0;
		right: 0;
		position: absolute;
	}
	
	.service .m2{
		top:0;
		right: 0;
		position: absolute;
	}
	
	 .m3{
		top:0;
		right: 0;
		position: absolute;
	}
	
	 .m4{
		top:0;
		right: 0;
		color: #FB3F00;
		position: absolute;
	}
	
	.m5{
		top:0;
		right: 0;
		color: #FB3F00;
		position: absolute;
	}
	
	.m6{
		top:0;
		right: 0;
		color: #5ed683;
		position: absolute;
	}
	
	/* 订单详情部分结束 */
	
	/* 订单信息部分开始 */
	
	.orderInfo{
		position: absolute;
		top: 1020rpx;
		margin: 0 20rpx;
		padding: 20rpx;
		width: 670rpx;
		border-radius: 20rpx;
		position: absolute;
		background-color: white;
	}
	
	.orderInfo .title{
		height: 88rpx;
		font-size: 34rpx;
		font-weight: bold;
		line-height: 88rpx;
		border-bottom: 4px solid #f2f2f2;
	}
	
	.infoItem{
		padding: 20rpx 0;
	}
	
	.orderInfo .infoItem>view{
		font-size: 30rpx;
		height: 68rpx;
		line-height: 68rpx;
		position: relative;
	}
	
	.info1{
		top:0;
		right: 0;
		color: gray;
		position: absolute;
	}
	/* 订单信息部分结束 */
	.aaa{
		height: 1200rpx;
	}
</style>